<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
        <meta name="author" content="Coderthemes">

        <link rel="shortcut icon" href="assets/images/favicon_1.ico">

        <title>Ubold - Responsive Admin Dashboard Template</title>

        <!-- Sweetalert -->
        <link href="../plugins/bootstrap-sweetalert/sweet-alert.css" rel="stylesheet" type="text/css">

        <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.css" rel="stylesheet" type="text/css" />

        <script src="assets/js/modernizr.min.js"></script>


    </head>


    <body class="fixed-left" id="do-nicescrol">
        
        <!-- Page-Title -->
        <div class="row">
            <div class="col-sm-12">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">设置</button>
                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" href="components-widgets.html#">下拉菜单1</a>
                        <a class="dropdown-item" href="components-widgets.html#">下拉菜单2</a>
                        <a class="dropdown-item" href="components-widgets.html#">下拉菜单3</a>
                        <a class="dropdown-item" href="components-widgets.html#">下拉菜单4</a>
                    </div>
                </div>

                <h4 class="page-title">Widgets</h4>
                <p class="text-muted page-title-alt">Welcome to Ubold admin panel !</p>

            </div>
        </div>

        <!-- Widget-box -->


        <div class="row">
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-bg-color-icon card-box">
                    <div class="bg-icon bg-icon-info pull-left">
                        <i class="md md-favorite-outline text-info"></i>
                    </div>
                    <div class="text-right">
                        <h3 class="text-dark"><b data-plugin="counterup">5894</b></h3>
                        <p class="text-muted">Income status</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-bg-color-icon card-box">
                    <div class="bg-icon bg-icon-pink pull-left">
                        <i class="md md-favorite-outline text-pink"></i>
                    </div>
                    <div class="text-right">
                        <h3 class="text-dark"><b data-plugin="counterup">9542</b></h3>
                        <p class="text-muted">Income status</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-bg-color-icon card-box">
                    <div class="bg-icon bg-icon-purple pull-left">
                        <i class="md md-favorite-outline text-purple"></i>
                    </div>
                    <div class="text-right">
                        <h3 class="text-dark"><b data-plugin="counterup">6584</b></h3>
                        <p class="text-muted">Income status</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>


            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-bg-color-icon card-box">
                    <div class="bg-icon bg-icon-success pull-left">
                        <i class="md md-favorite-outline text-success"></i>
                    </div>
                    <div class="text-right">
                        <h3 class="text-dark"><b data-plugin="counterup">36521</b></h3>
                        <p class="text-muted">Income status</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-bg-color-icon card-box">
                    <div class="bg-icon bg-icon-custom pull-left">
                        <i class="icon-plane text-custom"></i>
                    </div>
                    <div class="text-right">
                        <h3 class="text-dark"><b data-plugin="counterup">31570</b></h3>
                        <p class="text-muted">Income status</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-bg-color-icon card-box">
                    <div class="bg-icon bg-icon-warning pull-left">
                        <i class="icon-trophy text-warning"></i>
                    </div>
                    <div class="text-right">
                        <h3 class="text-dark"><b data-plugin="counterup">3652</b></h3>
                        <p class="text-muted">Income status</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>

            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-bg-color-icon card-box">
                    <div class="bg-icon bg-icon-inverse pull-left">
                        <i class="icon-layers text-inverse"></i>
                    </div>
                    <div class="text-right">
                        <h3 class="text-dark"><b data-plugin="counterup">5621</b></h3>
                        <p class="text-muted">Income status</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>


            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-bg-color-icon card-box">
                    <div class="bg-icon bg-icon-danger pull-left">
                        <i class="icon-basket-loaded text-danger"></i>
                    </div>
                    <div class="text-right">
                        <h3 class="text-dark"><b data-plugin="counterup">3625</b></h3>
                        <p class="text-muted">Income status</p>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>



        <div class="row">
            <div class="col-sm-12">
                <div class="card-box widget-inline">
                    <div class="row">
                        <div class="col-md-6 col-lg-6 col-xl-3">
                            <div class="widget-inline-box text-center">
                                <h3><i class="text-primary md md-add-shopping-cart"></i> <b data-plugin="counterup">8954</b></h3>
                                <h4 class="text-muted font-16">Lifetime total sales</h4>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6 col-xl-3">
                            <div class="widget-inline-box text-center">
                                <h3><i class="text-custom md md-attach-money"></i> <b data-plugin="counterup">7841</b></h3>
                                <h4 class="text-muted font-16">Income amounts</h4>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6 col-xl-3">
                            <div class="widget-inline-box text-center">
                                <h3><i class="text-pink md md-account-child"></i> <b data-plugin="counterup">6521</b></h3>
                                <h4 class="text-muted font-16">Total users</h4>
                            </div>
                        </div>

                        <div class="col-md-6 col-lg-6 col-xl-3">
                            <div class="widget-inline-box text-center b-0">
                                <h3><i class="text-purple md md-visibility"></i> <b data-plugin="counterup">325</b></h3>
                                <h4 class="text-muted font-16">Total visits</h4>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>



        <div class="row">
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="card-box widget-box-1 bg-white">
                    <i class="fa fa-info-circle text-muted pull-right inform" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on right"></i>
                    <h4 class="text-dark font-18">Income status</h4>
                    <h2 class="text-primary text-center">$<span data-plugin="counterup">31570</span></h2>
                    <p class="text-muted">Total income: $22506 <span class="pull-right"><i class="fa fa-caret-up text-primary m-r-5"></i>10.25%</span></p>
                </div>
            </div>

            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="card-box widget-box-1 bg-white">
                    <i class="fa fa-info-circle text-muted pull-right inform" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on right"></i>
                    <h4 class="text-dark font-18">Sales status</h4>
                    <h2 class="text-pink text-center"><span data-plugin="counterup">683</span></h2>
                    <p class="text-muted">Total sales: 2398 <span class="pull-right"><i class="fa fa-caret-down text-danger m-r-5"></i>7.85%</span></p>
                </div>
            </div>

            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="card-box widget-box-1 bg-white">
                    <i class="fa fa-info-circle text-muted pull-right inform" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on right"></i>
                    <h4 class="text-dark font-18">Income status</h4>
                    <h2 class="text-success text-center">$<span data-plugin="counterup">3652</span></h2>
                    <p class="text-muted">Total income: $22506 <span class="pull-right"><i class="fa fa-caret-up text-primary m-r-5"></i>10.25%</span></p>
                </div>
            </div>

            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="card-box widget-box-1 bg-white">
                    <i class="fa fa-info-circle text-muted pull-right inform" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Tooltip on right"></i>
                    <h4 class="text-dark font-18">Sales status</h4>
                    <h2 class="text-dark text-center"><span data-plugin="counterup">852</span></h2>
                    <p class="text-muted">Total sales: 2398 <span class="pull-right"><i class="fa fa-caret-down text-danger m-r-5"></i>7.85%</span></p>
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="mini-stat clearfix card-box">
                    <span class="mini-stat-icon bg-info"><i class="ion-social-usd text-white"></i></span>
                    <div class="mini-stat-info text-right text-dark">
                        <span class="counter text-dark" data-plugin="counterup">5623</span>
                        Total Sales
                    </div>
                    <div class="tiles-progress">
                        <div class="m-t-20">
                            <h5 class="text-uppercase font-16">Target <span class="pull-right">60%</span></h5>
                            <div class="progress progress-sm m-0">
                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="mini-stat clearfix card-box">
                    <span class="mini-stat-icon bg-warning"><i class="ion-ios7-cart text-white"></i></span>
                    <div class="mini-stat-info text-right text-dark">
                        <span class="counter text-dark" data-plugin="counterup">956</span>
                        New Orders
                    </div>
                    <div class="tiles-progress">
                        <div class="m-t-20">
                            <h5 class="text-uppercase font-16">Target <span class="pull-right">90%</span></h5>
                            <div class="progress progress-sm m-0">
                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
                                    <span class="sr-only">90% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="mini-stat clearfix card-box">
                    <span class="mini-stat-icon bg-pink"><i class="ion-android-contacts text-white"></i></span>
                    <div class="mini-stat-info text-right text-dark">
                        <span class="counter text-dark" data-plugin="counterup">5210</span>
                        New Users
                    </div>
                    <div class="tiles-progress">
                        <div class="m-t-20">
                            <h5 class="text-uppercase font-16">Target <span class="pull-right">57%</span></h5>
                            <div class="progress progress-sm m-0">
                                <div class="progress-bar progress-bar-pink" role="progressbar" aria-valuenow="57" aria-valuemin="0" aria-valuemax="100" style="width: 57%">
                                    <span class="sr-only">57% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="mini-stat clearfix card-box">
                    <span class="mini-stat-icon bg-success"><i class="ion-eye text-white"></i></span>
                    <div class="mini-stat-info text-right text-dark">
                        <span class="counter text-dark" data-plugin="counterup">20544</span>
                        Unique Visitors
                    </div>
                    <div class="tiles-progress">
                        <div class="m-t-20">
                            <h5 class="text-uppercase font-16">Target <span class="pull-right">60%</span></h5>
                            <div class="progress progress-sm m-0">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                    <span class="sr-only">60% Complete</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="row">
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-panel widget-style-2 bg-white">
                    <i class="md md-attach-money text-primary"></i>
                    <h2 class="m-0 text-dark counter font-600"><span data-plugin="counterup">58962</span></h2>
                    <div class="text-muted m-t-5">Total Revenue</div>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-panel widget-style-2 bg-white">
                    <i class="md md-add-shopping-cart text-pink"></i>
                    <h2 class="m-0 text-dark counter font-600"><span data-plugin="counterup">2541</span></h2>
                    <div class="text-muted m-t-5">Sales</div>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-panel widget-style-2 bg-white">
                    <i class="md md-store-mall-directory text-info"></i>
                    <h2 class="m-0 text-dark counter font-600"><span data-plugin="counterup">895</span></h2>
                    <div class="text-muted m-t-5">Stores</div>
                </div>
            </div>
            <div class="col-md-6 col-lg-6 col-xl-3">
                <div class="widget-panel widget-style-2 bg-white">
                    <i class="md md-account-child text-custom"></i>
                    <h2 class="m-0 text-dark counter font-600"><span data-plugin="counterup">3678</span></h2>
                    <div class="text-muted m-t-5">Users</div>
                </div>
            </div>
        </div>


        <!-- CHART WIDGET -->
        <div class="row">
            <div class="col-sm-12">
                <h4 class="page-header header-title m-b-20 pb-3">Chart Widget</h4>
            </div>
        </div>


        <div class="row">
            <div class="col-xl-4">
                <div class="card-box">
                    <div class="bar-widget">
                        <div class="table-box">
                            <div class="table-detail">
                                <div class="iconbox bg-info">
                                    <i class="icon-layers"></i>
                                </div>
                            </div>

                            <div class="table-detail">
                                <h4 class="m-t-0 m-b-5"><b><span data-plugin="counterup">125</span></b></h4>
                                <h5 class="text-muted m-b-0 m-t-0">Visiters</h5>
                            </div>
                            <div class="table-detail text-right">
                                <span data-plugin="peity-bar" data-colors="#34d3eb,#ebeff2" data-width="120" data-height="45">5,3,9,6,5,9,7,3,5,2,9,7,2,1</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <div class="bar-widget">
                        <div class="table-box">
                            <div class="table-detail">
                                <div class="iconbox bg-custom">
                                    <i class="icon-layers"></i>
                                </div>
                            </div>

                            <div class="table-detail">
                                <h4 class="m-t-0 m-b-5"><b>1256</b></h4>
                                <h5 class="text-muted m-b-0 m-t-0">Visiters</h5>
                            </div>
                            <div class="table-detail text-right">
                                <span data-plugin="peity-pie" data-colors="#5fbeaa,#ebeff2" data-width="50" data-height="45">1/5</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <div class="bar-widget">
                        <div class="table-box">
                            <div class="table-detail">
                                <div class="iconbox bg-danger">
                                    <i class="icon-layers"></i>
                                </div>
                            </div>

                            <div class="table-detail">
                                <h4 class="m-t-0 m-b-5"><b>1256</b></h4>
                                <h5 class="text-muted m-b-0 m-t-0">Visiters</h5>
                            </div>
                            <div class="table-detail text-right">
                                <span data-plugin="peity-donut" data-colors="#f05050,#ebeff2" data-width="50" data-height="45">1/5</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-xl-4">
                <div class="card-box">
                    <div class="bar-widget">
                        <div class="table-box">
                            <div class="table-detail">
                                <div class="iconbox bg-purple">
                                    <i class="icon-layers"></i>
                                </div>
                            </div>

                            <div class="table-detail">
                                <h4 class="m-t-0 m-b-5"><b>1256</b></h4>
                                <h5 class="text-muted m-b-0 m-t-0">Visiters</h5>
                            </div>
                            <div class="table-detail text-right">
                                <span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#7266ba", "#ebeff2"], "innerRadius": 20, "radius": 24 }'>5/7</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <div class="bar-widget">
                        <div class="table-box">
                            <div class="table-detail">
                                <div class="iconbox bg-inverse">
                                    <i class="icon-layers"></i>
                                </div>
                            </div>

                            <div class="table-detail">
                                <h4 class="m-t-0 m-b-5"><b>1256</b></h4>
                                <h5 class="text-muted m-b-0 m-t-0">Visiters</h5>
                            </div>
                            <div class="table-detail text-right">
                                <span data-plugin="peity-line" data-fill="#4c5667" data-stroke="#4c5667" data-width="100" data-height="48">5,3,9,6,5,9,7,3,5,2</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <div class="bar-widget">
                        <div class="table-box">
                            <div class="table-detail">
                                <div class="iconbox bg-warning">
                                    <i class="icon-layers"></i>
                                </div>
                            </div>

                            <div class="table-detail">
                                <h4 class="m-t-0 m-b-5"><b>1256</b></h4>
                                <h5 class="text-muted m-b-0 m-t-0">Visiters</h5>
                            </div>
                            <div class="table-detail text-right">
                                <span data-plugin="peity-bar" data-colors="#ffbd4a,#ebeff2" data-width="120" data-height="48">5,3,9,6,5,9,7,3,5,2,9,7,2,1</span>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="text-dark header-title m-t-0 m-b-30">Total Revenue</h4>

                    <div class="widget-chart text-center">
                        <input class="knob" data-width="150" data-height="150" data-linecap=round data-fgColor="#5d9cec" value="55" data-skin="tron" data-angleOffset="180" data-readOnly=true data-thickness=".15"/>
                        <h5 class="text-muted m-t-20 font-16">Total sales made today</h5>
                        <h2 class="font-600">$75</h2>
                        <ul class="list-inline m-t-15">
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Target</h5>
                                <h4 class="m-b-0">$1000</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last week</h5>
                                <h4 class="m-b-0">$523</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last Month</h5>
                                <h4 class="m-b-0">$965</h4>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="text-dark  header-title m-t-0 m-b-30">Total Revenue</h4>

                    <div class="widget-chart text-center">
                        <input class="knob" data-width="150" data-height="150" data-linecap=round data-fgColor="#fb6d9d" value="80" data-skin="tron" data-angleOffset="180" data-readOnly=true data-thickness=".15"/>
                        <h5 class="text-muted m-t-20 font-16">Total sales made today</h5>
                        <h2 class="font-600">$75</h2>
                        <ul class="list-inline m-t-15">
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Target</h5>
                                <h4 class="m-b-0">$1000</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last week</h5>
                                <h4 class="m-b-0">$523</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last Month</h5>
                                <h4 class="m-b-0">$965</h4>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="text-dark header-title m-t-0 m-b-30">Total Revenue</h4>

                    <div class="widget-chart text-center">
                        <input class="knob" data-width="150" data-height="150" data-linecap=round data-fgColor="#34d3eb" value="60" data-skin="tron" data-angleOffset="180" data-readOnly=true data-thickness=".15"/>
                        <h5 class="text-muted m-t-20">Total sales made today</h5>
                        <h2 class="font-600">$75</h2>
                        <ul class="list-inline m-t-15">
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Target</h5>
                                <h4 class="m-b-0">$1000</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last week</h5>
                                <h4 class="m-b-0">$523</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last Month</h5>
                                <h4 class="m-b-0">$965</h4>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

        </div>


        <div class="row">
            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="text-dark  header-title m-t-0 m-b-30">Total Revenue</h4>

                    <div class="widget-chart text-center">
                        <div id="sparkline1"></div>
                        <ul class="list-inline m-t-15">
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Target</h5>
                                <h4 class="m-b-0">$1000</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last week</h5>
                                <h4 class="m-b-0">$523</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last Month</h5>
                                <h4 class="m-b-0">$965</h4>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="text-dark  header-title m-t-0 m-b-30">Total Revenue</h4>

                    <div class="widget-chart text-center">
                        <div id="sparkline2"></div>
                        <ul class="list-inline m-t-15">
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Target</h5>
                                <h4 class="m-b-0">$1000</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last week</h5>
                                <h4 class="m-b-0">$523</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last Month</h5>
                                <h4 class="m-b-0">$965</h4>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="text-dark header-title m-t-0 m-b-30">Total Revenue</h4>

                    <div class="widget-chart text-center">
                        <div id="sparkline3"></div>
                        <ul class="list-inline m-t-15">
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Target</h5>
                                <h4 class="m-b-0">$1000</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last week</h5>
                                <h4 class="m-b-0">$523</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last Month</h5>
                                <h4 class="m-b-0">$965</h4>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

        </div>


        <div class="row">
            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="text-dark  header-title m-t-0 m-b-30">Total Revenue</h4>

                    <div class="widget-chart text-center">
                        <div id="sparkline4"></div>
                        <ul class="list-inline m-t-15">
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Target</h5>
                                <h4 class="m-b-0">$1000</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last week</h5>
                                <h4 class="m-b-0">$523</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last Month</h5>
                                <h4 class="m-b-0">$965</h4>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="text-dark  header-title m-t-0 m-b-30">Total Revenue</h4>

                    <div class="widget-chart text-center">
                        <div id="sparkline5" class="text-center"></div>

                        <ul class="list-inline m-t-15">
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Target</h5>
                                <h4 class="m-b-0">$1000</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last week</h5>
                                <h4 class="m-b-0">$523</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last Month</h5>
                                <h4 class="m-b-0">$965</h4>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="text-dark header-title m-t-0 m-b-30">Total Revenue</h4>

                    <div class="widget-chart text-center">
                        <div id="sparkline6"></div>
                        <ul class="list-inline m-t-15">
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Target</h5>
                                <h4 class="m-b-0">$1000</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last week</h5>
                                <h4 class="m-b-0">$523</h4>
                            </li>
                            <li>
                                <h5 class="text-muted m-t-20 font-16">Last Month</h5>
                                <h4 class="m-b-0">$965</h4>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

        </div>





        <!-- OTHER WIDGET -->
        <div class="row">
            <div class="col-sm-12">
                <h4 class="page-header header-title pb-3 m-b-20">Other Widget</h4>
            </div>
        </div>


        <div class="row">
            <!-- INBOX -->
            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="m-t-0 m-b-20 header-title"><b>Inbox</b></h4>

                    <div class="inbox-widget nicescroll mx-box">
                        <a href="components-widgets.html#">
                            <div class="inbox-item">
                                <div class="inbox-item-img"><img src="assets/images/users/avatar-1.jpg" class="rounded-circle" alt=""></div>
                                <p class="inbox-item-author">Chadengle</p>
                                <p class="inbox-item-text">Hey! there I'm available...</p>
                                <p class="inbox-item-date">13:40 PM</p>
                            </div>
                        </a>
                        <a href="components-widgets.html#">
                            <div class="inbox-item">
                                <div class="inbox-item-img"><img src="assets/images/users/avatar-2.jpg" class="rounded-circle" alt=""></div>
                                <p class="inbox-item-author">Tomaslau</p>
                                <p class="inbox-item-text">I've finished it! See you so...</p>
                                <p class="inbox-item-date">13:34 PM</p>
                            </div>
                        </a>
                        <a href="components-widgets.html#">
                            <div class="inbox-item">
                                <div class="inbox-item-img"><img src="assets/images/users/avatar-3.jpg" class="rounded-circle" alt=""></div>
                                <p class="inbox-item-author">Stillnotdavid</p>
                                <p class="inbox-item-text">This theme is awesome!</p>
                                <p class="inbox-item-date">13:17 PM</p>
                            </div>
                        </a>
                        <a href="components-widgets.html#">
                            <div class="inbox-item">
                                <div class="inbox-item-img"><img src="assets/images/users/avatar-4.jpg" class="rounded-circle" alt=""></div>
                                <p class="inbox-item-author">Kurafire</p>
                                <p class="inbox-item-text">Nice to meet you</p>
                                <p class="inbox-item-date">12:20 PM</p>
                            </div>
                        </a>
                        <a href="components-widgets.html#">
                            <div class="inbox-item">
                                <div class="inbox-item-img"><img src="assets/images/users/avatar-5.jpg" class="rounded-circle" alt=""></div>
                                <p class="inbox-item-author">Shahedk</p>
                                <p class="inbox-item-text">Hey! there I'm available...</p>
                                <p class="inbox-item-date">10:15 AM</p>
                            </div>
                        </a>
                        <a href="components-widgets.html#">
                            <div class="inbox-item">
                                <div class="inbox-item-img"><img src="assets/images/users/avatar-6.jpg" class="rounded-circle" alt=""></div>
                                <p class="inbox-item-author">Adhamdannaway</p>
                                <p class="inbox-item-text">This theme is awesome!</p>
                                <p class="inbox-item-date">9:56 AM</p>
                            </div>
                        </a>
                        <a href="components-widgets.html#">
                            <div class="inbox-item">
                                <div class="inbox-item-img"><img src="assets/images/users/avatar-8.jpg" class="rounded-circle" alt=""></div>
                                <p class="inbox-item-author">Arashasghari</p>
                                <p class="inbox-item-text">Hey! there I'm available...</p>
                                <p class="inbox-item-date">10:15 AM</p>
                            </div>
                        </a>
                        <a href="components-widgets.html#">
                            <div class="inbox-item">
                                <div class="inbox-item-img"><img src="assets/images/users/avatar-9.jpg" class="rounded-circle" alt=""></div>
                                <p class="inbox-item-author">Joshaustin</p>
                                <p class="inbox-item-text">I've finished it! See you so...</p>
                                <p class="inbox-item-date">9:56 AM</p>
                            </div>
                        </a>
                    </div>
                </div>

            </div> <!-- end col -->

            <!-- CHAT -->
            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="m-t-0 m-b-20 header-title"><b>Chat</b></h4>

                    <div class="chat-conversation">
                        <ul class="conversation-list nicescroll">
                            <li class="clearfix">
                                <div class="chat-avatar">
                                    <img src="assets/images/avatar-1.jpg" alt="male">
                                    <i>10:00</i>
                                </div>
                                <div class="conversation-text">
                                    <div class="ctext-wrap">
                                        <i>John Deo</i>
                                        <p>
                                            Hello!
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class="clearfix odd">
                                <div class="chat-avatar">
                                    <img src="assets/images/users/avatar-5.jpg" alt="Female">
                                    <i>10:01</i>
                                </div>
                                <div class="conversation-text">
                                    <div class="ctext-wrap">
                                        <i>Smith</i>
                                        <p>
                                            Hi, How are you? What about our next meeting?
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class="clearfix">
                                <div class="chat-avatar">
                                    <img src="assets/images/avatar-1.jpg" alt="male">
                                    <i>10:01</i>
                                </div>
                                <div class="conversation-text">
                                    <div class="ctext-wrap">
                                        <i>John Deo</i>
                                        <p>
                                            Yeah everything is fine
                                        </p>
                                    </div>
                                </div>
                            </li>
                            <li class="clearfix odd">
                                <div class="chat-avatar">
                                    <img src="assets/images/users/avatar-5.jpg" alt="male">
                                    <i>10:02</i>
                                </div>
                                <div class="conversation-text">
                                    <div class="ctext-wrap">
                                        <i>Smith</i>
                                        <p>
                                            Wow that's great
                                        </p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="row">
                            <div class="col-sm-9 chat-inputbar">
                                <input type="text" class="form-control chat-input" placeholder="Enter your text">
                            </div>
                            <div class="col-sm-3 chat-send">
                                <button type="submit" class="btn btn-md btn-info btn-block waves-effect waves-light">Send</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div> <!-- end col-->


            <!-- Todos app -->
            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="m-t-0 m-b-20 header-title"><b>Todo</b></h4>
                    <div class="todoapp">
                        <div class="row">
                            <div class="col-sm-6">
                                <h4 id="todo-message"><span id="todo-remaining"></span> of <span id="todo-total"></span> remaining</h4>
                            </div>
                            <div class="col-sm-6">
                                <a href="" class="pull-right btn btn-primary btn-sm waves-effect waves-light" id="btn-archive">Archive</a>
                            </div>
                        </div>

                        <ul class="list-group no-margn nicescroll todo-list" style="height: 280px" id="todo-list"></ul>

                        <form name="todo-form" id="todo-form" role="form" class="m-t-20">
                            <div class="row">
                                <div class="col-sm-9 todo-inputbar">
                                    <input type="text" id="todo-input-text" name="todo-input-text" class="form-control" placeholder="Add new todo">
                                </div>
                                <div class="col-sm-3 todo-send">
                                    <button class="btn-primary btn-md btn-block btn waves-effect waves-light" type="button" id="todo-btn-submit">Add</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

            </div> <!-- end col -->
        </div> <!-- end row -->


        <!-- row -->
        <div class="row">
            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="m-t-0 m-b-20 header-title"><b>Last Transactions</b></h4>

                    <ul class="list-unstyled transaction-list mb-0">
                        <li>
                            <i class="ti-download text-success"></i>
                            <span class="tran-text">Advertising</span>
                            <span class="pull-right text-success tran-price">+$230</span>
                            <span class="pull-right text-muted">07/09/2015</span>
                            <span class="clearfix"></span>
                        </li>

                        <li>
                            <i class="ti-upload text-danger"></i>
                            <span class="tran-text">Support licence</span>
                            <span class="pull-right text-danger tran-price">-$965</span>
                            <span class="pull-right text-muted">07/09/2015</span>
                            <span class="clearfix"></span>
                        </li>

                        <li>
                            <i class="ti-download text-success"></i>
                            <span class="tran-text">Extended licence</span>
                            <span class="pull-right text-success tran-price">+$830</span>
                            <span class="pull-right text-muted">07/09/2015</span>
                            <span class="clearfix"></span>
                        </li>

                        <li>
                            <i class="ti-download text-success"></i>
                            <span class="tran-text">Advertising</span>
                            <span class="pull-right text-success tran-price">+$230</span>
                            <span class="pull-right text-muted">05/09/2015</span>
                            <span class="clearfix"></span>
                        </li>

                        <li>
                            <i class="ti-upload text-danger"></i>
                            <span class="tran-text">New plugins added</span>
                            <span class="pull-right text-danger tran-price">-$452</span>
                            <span class="pull-right text-muted">05/09/2015</span>
                            <span class="clearfix"></span>
                        </li>

                        <li>
                            <i class="ti-download text-success"></i>
                            <span class="tran-text">Google Inc.</span>
                            <span class="pull-right text-success tran-price">+$230</span>
                            <span class="pull-right text-muted">04/09/2015</span>
                            <span class="clearfix"></span>
                        </li>

                        <li>
                            <i class="ti-upload text-danger"></i>
                            <span class="tran-text">Facebook Ad</span>
                            <span class="pull-right text-danger tran-price">-$364</span>
                            <span class="pull-right text-muted">03/09/2015</span>
                            <span class="clearfix"></span>
                        </li>

                        <li>
                            <i class="ti-download text-success"></i>
                            <span class="tran-text">New sale</span>
                            <span class="pull-right text-success tran-price">+$230</span>
                            <span class="pull-right text-muted">03/09/2015</span>
                            <span class="clearfix"></span>
                        </li>

                        <li>
                            <i class="ti-download text-success"></i>
                            <span class="tran-text">Advertising</span>
                            <span class="pull-right text-success tran-price">+$230</span>
                            <span class="pull-right text-muted">29/08/2015</span>
                            <span class="clearfix"></span>
                        </li>

                        <li>
                            <i class="ti-upload text-danger"></i>
                            <span class="tran-text">Support licence</span>
                            <span class="pull-right text-danger tran-price">-$854</span>
                            <span class="pull-right text-muted">27/08/2015</span>
                            <span class="clearfix"></span>
                        </li>


                    </ul>
                </div>
            </div> <!-- col-->


            <div class="col-xl-4">
                <div class="card-box">
                    <h4 class="m-t-0 m-b-20 header-title"><b>Friends <span class="text-muted">(154)</span></b></h4>

                    <form role="form">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" id="example-input1-group2" name="example-input1-group2" class="form-control" placeholder="Search">
                                <span class="input-group-btn">
                                	<button type="button" class="btn waves-effect btn-white"><i class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </div> <!-- form-group -->
                    </form>


                    <div class="friend-list text-center">
                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-1.jpg" class="rounded-circle thumb-md" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-2.jpg" class="rounded-circle thumb-md" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-3.jpg" class="rounded-circle thumb-md" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-4.jpg" class="rounded-circle thumb-md" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-5.jpg" class="rounded-circle thumb-md" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-6.jpg" class="rounded-circle thumb-md" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-7.jpg" class="rounded-circle thumb-md" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <span class="extra-number">+89</span>
                        </a>
                    </div>
                </div>


                <div class="card-box">
                    <h4 class="m-t-0 m-b-20 header-title"><b>Followers <span class="text-muted">(685)</span></b></h4>

                    <form role="form">
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" id="example-input1-group1" name="example-input1-group1" class="form-control" placeholder="Search">
                                <span class="input-group-btn">
                                	<button type="button" class="btn waves-effect btn-white"><i class="fa fa-search"></i></button>
                                </span>
                            </div>
                        </div> <!-- form-group -->
                    </form>


                    <div class="friend-list text-center">
                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-1.jpg" class="rounded-circle thumb-md img-thumbnail" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-2.jpg" class="rounded-circle thumb-md img-thumbnail" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-3.jpg" class="rounded-circle thumb-md img-thumbnail" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-4.jpg" class="rounded-circle thumb-md img-thumbnail" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-5.jpg" class="rounded-circle thumb-md img-thumbnail" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-6.jpg" class="rounded-circle thumb-md img-thumbnail" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <img src="assets/images/users/avatar-7.jpg" class="rounded-circle thumb-md img-thumbnail" alt="friend" />
                        </a>

                        <a href="components-widgets.html#">
                            <span class="extra-number">+89</span>
                        </a>
                    </div>
                </div>

            </div> <!-- end col -->


            <div class="col-xl-4">
                <div class="card-box p-0">
                    <div class="profile-widget text-center">
                        <div class="bg-custom bg-profile"></div>
                        <img src="assets/images/users/avatar-3.jpg" class="thumb-lg rounded-circle img-thumbnail" alt="img">
                        <h4>Jonathan Doe</h4>
                        <p class="text-muted"><i class="fa fa-map-marker"></i> London</p>
                        <a href="components-widgets.html#" class="btn btn-sm btn-purple m-t-20">Follow</a>
                        <a href="components-widgets.html#" class="btn btn-sm btn-pink m-t-20">Send message</a>
                        <p class="m-t-10 text-muted p-20">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
                        <ul class="row list-unstyled widget-list mb-0 clearfix">
                            <li class="col-md-4"><span>2.109</span>Followers</li>
                            <li class="col-md-4"><span>596</span>Photos</li>
                            <li class="col-md-4"><span>902</span>Like</li>
                        </ul>
                    </div>
                </div>
            </div> <!-- end col -->
        </div>
        <!-- end row-->


        <div class="row">
            <div class="col-xl-4">
                <div class="widget-profile-one">
                    <div class="text-white card-box m-b-0 b-0 bg-primary p-lg text-center">
                        <div class="m-b-30">
                            <h4 class="text-white m-b-5">
                                Arashas Smith
                            </h4>
                            <small>Founder of Company</small>
                        </div>
                        <img src="assets/images/users/avatar-8.jpg" class="rounded-circle thumb-lg" alt="profile">
                        <div class="m-t-10">
                            <span><b>480</b> Tweets</span> |
                            <span><b>1450</b> Following</span> |
                            <span><b>610</b> Followers</span>
                        </div>
                    </div>
                    <div class="card-box">
                        <h4 class="media-heading font-18 mt-0">Alex Smith</h4>
                        <p class="text-muted font-13">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Simply dummy text of the printing and typesetting.</p>
                        <div class="text-right">
                            <a class="btn btn-sm btn-white waves-effect"><i class="fa fa-thumbs-up"></i> Like </a>
                            <a class="btn btn-sm btn-danger waves-effect waves-light"><i class="fa fa-heart"></i> Love</a>
                        </div>
                    </div>
                </div>


                <!-- blog content -->
                <div class="blog-box-one">
                    <div class="cover-wrapper">
                        <a href="components-widgets.html#"><img alt="Blog-img" src="assets/images/blogs/5.jpg"
                                         class="img-fluid"/></a>
                    </div>
                    <div class="post-info">
                        <div class="date">
                            <span class="day">16</span><br>
                            <span class="month">Mar</span>
                        </div>

                        <div class="meta-container">
                            <a href="components-widgets.html#">
                                <h4 class="text-overflow text-dark font-18 font-600 m-t-0">Beautiful Image Blog Post</h4>
                            </a>
                            <div class="font-13">
                                <span class="meta">Posted by James in <a href="components-widgets.html#"><b>Web Design</b></a></span>
                            </div>
                        </div>

                        <p class="text-muted m-b-0">
                            Nunc nec dui vitae urna cursus lacinia. In
                            venenatis eget justo in dictum. Vestibulum
                            auctor raesent quisnm.Lorem Ipsum is simply dummy text
                            of the printing and typesetting industry. Simply dummy
                            text of the printing and typesetting.
                        </p>

                        <div class="row m-t-10">
                            <div class="col-6">
                                <div class="m-t-10 blog-widget-action">
                                    <a href="javascript:void(0)">
                                        <i class="mdi md-favorite"></i> <span>54</span>
                                    </a>
                                    <a href="javascript:void(0)">
                                        <i class="mdi md-comment"></i> <span>26</span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-6 text-right">
                                <a href="" class="btn btn-sm waves-effect btn-white">Read More</a>
                            </div>
                        </div>
                    </div>

                </div><!-- end blog -->

            </div><!-- end col -->

            <div class="col-xl-4">
                <div class="btn-twitter social-feed-box m-b-20">
                    <div class="p-20">
                        <div class="">
                            <span class="text-uppercase font-600 pull-right">Latest Tweets</span>
                            <i class="fa fa-twitter fa-2x"></i>
                        </div>
                        <div id="twitter-slider" class="carousel slide social-feed-slider" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators m-b-0">
                                <li data-target="#twitter-slider" data-slide-to="0"
                                    class="active"></li>
                                <li data-target="#twitter-slider" data-slide-to="1"></li>
                                <li data-target="#twitter-slider" data-slide-to="2"></li>
                            </ol>
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <div class="carousel-item active">
                                    <div class="m-t-20" >
                                        <h3 class="text-white m-b-5">Contrary to popular belief, Lorem Ipsum is not simply random text piece of classical Latin...</h3>
                                        <span class="font-13"><small>10 March, 2016</small></span>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="m-t-20">
                                        <h3 class="text-white m-b-5">Latin literature from 45 BC,making it over 2000 years old. Contrary to popular belief...</h3>
                                        <span class="font-13"><small>6 March, 2016</small></span>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="m-t-20">
                                        <h3 class="text-white m-b-5">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC...</h3>
                                        <span class="font-13"><small>6 March, 2016</small></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="btn-facebook social-feed-box m-b-20">
                    <div class="p-20">
                        <div class="">
                            <span class="text-uppercase font-600 pull-right">Facebook Feed</span>
                            <i class="fa fa-facebook fa-2x"></i>
                        </div>

                        <div id="facebook-slider" class="carousel slide social-feed-slider" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators m-b-0">
                                <li data-target="#facebook-slider" data-slide-to="0"
                                    class="active"></li>
                                <li data-target="#facebook-slider" data-slide-to="1"></li>
                                <li data-target="#facebook-slider" data-slide-to="2"></li>
                            </ol>
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <div class="carousel-item active">
                                    <div class="m-t-20" >
                                        <h3 class="text-white m-b-5">Contrary to popular belief, Lorem Ipsum is not simply random text piece of classical Latin...</h3>
                                        <span class="font-13"><small>10 March, 2016</small></span>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="m-t-20">
                                        <h3 class="text-white m-b-5">Latin literature from 45 BC,making it over 2000 years old. Contrary to popular belief...</h3>
                                        <span class="font-13"><small>6 March, 2016</small></span>
                                    </div>
                                </div>
                                <div class="carousel-item">
                                    <div class="m-t-20">
                                        <h3 class="text-white m-b-5">Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC...</h3>
                                        <span class="font-13"><small>6 March, 2016</small></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- blog content -->
                <div class="blog-box-one">
                    <div class="cover-wrapper">
                        <div id="blog-slider" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators m-b-0">
                                <li data-target="#blog-slider" data-slide-to="0"
                                    class="active"></li>
                                <li data-target="#blog-slider" data-slide-to="1"></li>
                                <li data-target="#blog-slider" data-slide-to="2"></li>
                            </ol>
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                                <div class="carousel-item active">
                                    <img alt="Blog-img" src="assets/images/blogs/1.jpg" class="img-fluid"/>
                                </div>
                                <div class="carousel-item">
                                    <img alt="Blog-img" src="assets/images/blogs/2.jpg" class="img-fluid"/>
                                </div>
                                <div class="carousel-item">
                                    <img alt="Blog-img" src="assets/images/blogs/6.jpg" class="img-fluid"/>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="post-info">
                        <div class="date">
                            <span class="day">11</span><br>
                            <span class="month">Feb</span>
                        </div>

                        <div class="meta-container">
                            <a href="components-widgets.html#">
                                <h4 class="text-overflow text-dark font-18 font-600 m-t-0 font-18">Beautiful Image Blog Post</h4>
                            </a>
                            <div class="font-13">
                                <span class="meta">Posted by James in <a href="components-widgets.html#"><b>Web Design</b></a></span>
                            </div>
                        </div>

                        <p class="text-muted m-b-0">
                            Nunc nec dui vitae urna cursus lacinia. In
                            venenatis eget justo in dictum. Vestibulum
                            auctor raesent quisnm.
                        </p>

                        <div class="row m-t-10">
                            <div class="col-xs-6">
                                <div class="m-t-10 blog-widget-action">
                                    <a href="javascript:void(0)">
                                        <i class="mdi md-favorite"></i> <span>34</span>
                                    </a>
                                    <a href="javascript:void(0)">
                                        <i class="mdi md-comment"></i> <span>58</span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-xs-6 text-right">
                                <a href="" class="btn btn-sm waves-effect btn-white">Read More</a>
                            </div>
                        </div>

                    </div>

                </div><!-- end blog -->

            </div> <!-- end col -->

            <div class="col-xl-4">
                <div class="card-box p-b-0">
                    <div class="text-center">
                        <a href="javascript:;" class="mx-auto text-center text-dark">
                            <img src="assets/images/users/avatar-7.jpg"
                                 class="thumb-lg img-thumbnail rounded-circle" alt="">
                            <div class="h5 m-b-0"><strong>Arashas Smith</strong></div>
                        </a>
                    </div>
                    <div class="bg-custom pull-in-card p-20 widget-box-two m-b-0 m-t-30 list-inline text-center row">
                        <div class="col-4">
                            <h4 class="text-white m-0 font-600">782</h4>
                            <p class="text-white m-b-0">Followers</p>
                        </div>
                        <div class="col-4">
                            <h4 class="text-white m-0 font-600">834</h4>
                            <p class="text-white m-b-0">Following</p>
                        </div>
                        <div class="col-4">
                            <h4 class="text-white m-0 font-600">2907</h4>
                            <p class="text-white m-b-0">Likes</p>
                        </div>
                    </div>
                </div>

                <div class="bg-white m-b-20">
                    <div class="p-0">
                        <div class="pro-widget-img"></div>
                    </div>
                    <div class="p-20 row">
                        <div class="clearfix col-lg-6 col-md-12 col-sm-6">
                            <h4 class="m-t-0 m-b-5 font-18">Adhamdannaway</h4>
                            <p class="c-gray f-16 align-center">Photographer</p>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-6 p-t-20">
                            <div class="row">
                                <div class="col-4">
                                    <div class="text-center m-b-5">
                                        <i class="mdi md-comment"></i>
                                    </div>
                                    <div class="text-center">
                                        1568
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center m-b-5">
                                        <i class="mdi md-thumb-up text-success"></i>
                                    </div>
                                    <div class="text-center">
                                        866
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="text-center m-b-5">
                                        <i class="mdi md-favorite text-danger"></i>
                                    </div>
                                    <div class="text-center">
                                        254
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- blog content -->
                <div class="blog-box-one">
                    <div class="cover-wrapper bg-purple text-white p-20">
                        <i class="fa fa-quote-left fa-3x fa-pull-left"></i>
                        ...tomorrow we will run faster, stretch out our arms farther...
                        And then one fine morning— So we beat on, boats against the
                        current, borne back ceaselessly into the past.
                    </div>
                    <div class="post-info">
                        <div class="date">
                            <span class="day">11</span><br>
                            <span class="month">Feb</span>
                        </div>

                        <div class="meta-container">
                            <a href="components-widgets.html#">
                                <h4 class="text-overflow text-dark font-18 font-600 m-t-0 font-18">A lovely audio post for good measure</h4>
                            </a>
                            <div class="font-13">
                                <span class="meta">Posted by James in <a href="components-widgets.html#"><b>Web Design</b></a></span>
                            </div>
                        </div>

                        <p class="text-muted m-b-0">
                            Nunc nec dui vitae urna cursus lacinia. In
                            venenatis eget justo in dictum. Vestibulum
                            auctor raesent quisnm.
                        </p>

                        <div class="row m-t-10">
                            <div class="col-6">
                                <div class="m-t-10 blog-widget-action">
                                    <a href="javascript:void(0)">
                                        <i class="mdi md-favorite"></i> <span>34</span>
                                    </a>
                                    <a href="javascript:void(0)">
                                        <i class="mdi md-comment"></i> <span>58</span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-6 text-right">
                                <a href="" class="btn btn-sm waves-effect btn-white">Read More</a>
                            </div>
                        </div>

                    </div>

                </div><!-- end blog -->


                <!-- blog content -->
                <div class="blog-box-one">
                    <div class="cover-wrapper bg-muted text-white">
                        <iframe width="100%" height="150" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/207659137&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
                    </div>
                    <div class="post-info">
                        <div class="date">
                            <span class="day">11</span><br>
                            <span class="month">Feb</span>
                        </div>

                        <div class="meta-container">
                            <a href="components-widgets.html#">
                                <h4 class="text-overflow text-dark font-18 font-600 m-t-0 font-18">Soundcloud post</h4>
                            </a>
                            <div class="font-13">
                                <span class="meta">Posted by James in <a href="components-widgets.html#"><b>Web Design</b></a></span>
                            </div>
                        </div>

                        <p class="text-muted m-b-0">
                            Nunc nec dui vitae urna cursus lacinia. In
                            venenatis eget justo in dictum. Vestibulum
                            auctor raesent quisnm.
                        </p>

                        <div class="row m-t-10">
                            <div class="col-6">
                                <div class="m-t-10 blog-widget-action">
                                    <a href="javascript:void(0)">
                                        <i class="mdi md-favorite"></i> <span>34</span>
                                    </a>
                                    <a href="javascript:void(0)">
                                        <i class="mdi md-comment"></i> <span>58</span>
                                    </a>
                                </div>
                            </div>
                            <div class="col-6 text-right">
                                <a href="" class="btn btn-sm waves-effect btn-white">Read More</a>
                            </div>
                        </div>

                    </div>

                </div><!-- end blog -->


            </div> <!-- end col -->
        </div>
        <!-- end row -->

        <script>
            var resizefunc = [];
        </script>

        <!-- jQuery  -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/popper.min.js"></script><!-- Popper for Bootstrap -->
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/detect.js"></script>
        <script src="assets/js/fastclick.js"></script>
        <script src="assets/js/jquery.slimscroll.js"></script>
        <script src="assets/js/jquery.blockUI.js"></script>
        <script src="assets/js/waves.js"></script>
        <script src="assets/js/wow.min.js"></script>
        <script src="assets/js/jquery.nicescroll.js"></script>
        <script src="assets/js/jquery.scrollTo.min.js"></script>

        <!-- jQuery  -->
        <script src="../plugins/moment/moment.js"></script>

        <!-- jQuery  -->
        <script src="../plugins/waypoints/lib/jquery.waypoints.min.js"></script>
        <script src="../plugins/counterup/jquery.counterup.min.js"></script>

        <!-- jQuery  -->
        <script src="../plugins/bootstrap-sweetalert/sweet-alert.min.js"></script>

        <!-- skycons -->
        <script src="../plugins/skyicons/skycons.min.js" type="text/javascript"></script>

        <script src="../plugins/peity/jquery.peity.min.js"></script>

        <script src="assets/pages/jquery.widgets.js"></script>

        <!-- Todojs  -->
        <script src="assets/pages/jquery.todo.js"></script>

        <!-- chatjs  -->
        <script src="assets/pages/jquery.chat.js"></script>

        <!-- Knob -->
        <script src="../plugins/jquery-knob/jquery.knob.js"></script>

        <script src="../plugins/jquery-sparkline/jquery.sparkline.min.js"></script>

        <script src="assets/js/jquery.core.js"></script>
        <script src="assets/js/jquery.app.js"></script>


        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $(".knob").knob();
            });
        </script>

    </body>
</html>